<script setup>
import useStore from "../../store/index.js";
import {useRouter} from "vue-router";
import {Message} from "@arco-design/web-vue";

import banner3 from '../../assets/banner3.png';
import banner1 from '../../assets/banner1.png';
import banner2 from '../../assets/banner2.png';
import {onMounted, ref, watch} from "vue";
import {getIndexInfoApi} from "../../apis/IndexApi.js";
import {APP_NAME} from "../../config/index.js";
import {getTempLateListApi} from "../../apis/TemplateApi.js";
import {goPreviewSurveys} from "../../utils/CommonsUtil.js";
import SingleQuestion from "../../components/preview/SingleQuestion.vue";

const images = [banner3, banner1, banner2];
const store = useStore()
const router = useRouter()
//当前模板
const currentTempType = ref(0)
const templateList = ref([])
const templateTypeList = ['调查', '心理测试', '考试', '投票', '评测']
const info = ref({
    userCount: '0',
    surveyCount: '0',
    submitCount: '0',

})
const goPreView = (id) => {
    router.push(`/surveys/${id}`)
}
//监听模板变化
watch(() => currentTempType.value, () => {
    getTemplateList()
})
const getTemplateList = async () => {
    const res = await getTempLateListApi(1,5,{
        tags:JSON.stringify([templateTypeList[currentTempType.value]])
    })
    if (res.code === 0){
        templateList.value = res.data.records
    }else{
        Message.error(res.message)
    }
}
const getInfo = async () => {
    const res = await getIndexInfoApi()
    if (res.code === 0){
        info.value = res.data
    }else{
        Message.error(res.message)
    }
}
const checkLogin = () => {
    if(store.userIsLogin){
        return true
    }else{
        return false
    }
}
const goCreate = () => {
    if(checkLogin()){
        router.push('/workbench')
    }else{
        Message.error("请先登录")
        router.push('/login')
    }
}
const goSurvey = () => {
    if(checkLogin()){
        router.push('/surveys')
    }else{
        Message.error("请先登录")
    }
}
onMounted(() => {
    getInfo()
    getTemplateList()
})
</script>

<template>
<div class="w-full bg-gray-100 pb-10">
    <div class="bgdiv w-full min-h-[766px] bg-white">
        <h2 class="slogan pt-20">点击即发，让问卷帮你找到答案</h2>
        <p class="slogan2">3分钟创建问卷，自动生成可视化报告</p>
        <div class="mx-auto w-60 mt-8">
            <a-button size="large" @click="goCreate">创建问卷</a-button>
            <a-button status="success" size="large" class="ml-8" @click="goSurvey">我的工作台</a-button>
        </div>
        <a-carousel
            :style="{
  width: '60%',
  height: '320px',
  margin: '50px auto',
  borderRadius: '8px',
  overflow: 'hidden',

}"
            :auto-play="true"
            indicator-type="dot"
            show-arrow="hover"
        >
            <a-carousel-item v-for="img in images">
                <img
                    :src="img"
                    :style="{
              objectFit: 'cover',
              width: '100%',
            }"
                />
            </a-carousel-item>
        </a-carousel>
    </div>
    <div class="tongji1 w-full bg-white">
        <h3 class="text-center">
            {{APP_NAME}}已经为
            <span class="text-blue font-bold text-3xl">{{info.userCount}}</span>
            位用户收集了
            <span class="text-blue font-bold text-3xl">{{info.submitCount}}</span>
            份问卷
        </h3>
    </div>
    <div class=" mx-auto flex mt-8 justify-center">
        <div class="flex">
            <div class="h-96 w-[620px] bg-white rounded">
                <p class="info-title text-center mt-32">多种方式高效创建问卷</p>
                <p class="info-content text-center">官方模板库，快速引用</p>
                <p class="info-content text-center">自主创建问卷，自由组合</p>
                <p class="info-content text-center">分享我的问卷，上传为模板</p>
            </div>
            <div class="h-96 w-[620px] bg-white rounded py-2">
                <img src="../../assets/index_1.svg" alt="" style="width: 100%;height: 100%;">
            </div>
        </div>
    </div>
    <div class=" mx-auto flex mt-8 justify-center">
        <div class="flex">
            <div class="h-96 w-[620px] bg-white rounded py-2">
                <img src="../../assets/index_2.png" alt=""
                     class="rounded"
                     style="width: 100%;height: 100%;object-fit: cover">
            </div>
            <div class="h-96 w-[620px] bg-white rounded">
                <p class="info-title text-center mt-32">可视化图表实时呈现</p>
                <p class="info-content text-center">原始数据支持Excel格式导出</p>
                <p class="info-content text-center">支持查看每张详细答卷</p>
                <p class="info-content text-center">支持多种图表统计</p>
            </div>

        </div>
    </div>
    <div class=" mx-auto flex mt-8 justify-center">
        <div class="flex">
            <div class="h-96 w-[620px] bg-white rounded">
                <p class="info-title text-center mt-32">答题体验流畅顺滑</p>
                <p class="info-content text-center">多端完美适配，更好的呈现您的问卷</p>
                <p class="info-content text-center">可设置重复提交保护，避免产生垃圾数据</p>
                <p class="info-content text-center">可开启实名认证填写</p>
            </div>
            <div class="h-96 w-[620px] bg-white rounded py-2">
                <img src="../../assets/index_1.svg" alt="" style="width: 100%;height: 100%;">
            </div>
        </div>
    </div>
    <div class="w-full mt-8">
        <p class="text-center text-3xl font-bold">免费模板市场</p>
        <div class="w-full flex justify-center mt-5">
            <a-button-group type="text">
                <a-button  :type="currentTempType === index ? 'outline' : ''"
                           @click="currentTempType = index" v-for="(item,index) in templateTypeList"> {{ item }} </a-button>
            </a-button-group>
        </div>
        <div class="mx-auto w-72 h-[380px]" v-if="templateList.length === 0">
            <a-result status="404" subtitle="暂无模板，等待添加吧！">
            </a-result>
        </div>
        <a-space v-if="templateList.length !== 0"
                 class="w-full px-36 h-[380px]" align="center" :size="50" >
            <SingleQuestion :data="t" v-for="t in templateList"/>
        </a-space>
        <p class="text-center text-md mt-8 text-blue-600 cursor-pointer" @click="router.push('/template')">
            查看模板市场 >
        </p>
    </div>
    <div class="index-footer mt-8 w-4/5 mx-auto rounded-md pt-20 shadow-lg h-[460px] bg-white">
        <p class=" text-[30px] font-bold text-center">创建你的<span class="text-blue-600">第一份问卷</span>吧</p>
        <p class="text-gray-600 text-[17px] text-center mt-8">{{APP_NAME}}已经为{{info.userCount}}位用户收集了{{info.submitCount}} 份问卷</p>
        <div class="mx-auto mt-20 " style="width: 260px;">
            <a-button @click="goCreate" style="width: 260px;height: 65px;" type="primary">开始使用</a-button>
        </div>
    </div>
</div>

</template>

<style scoped>
.index-footer{
    background-image: url("../../assets/index_f_1.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.bgdiv{
    background-image: url("../../assets/index_bg..jpg");
    background-size: cover;
    background-position: center;
}
.slogan{
    font-size: 36px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 10px #000;
}
.slogan2{
    font-size: 18px;
    color: #fff;
    margin-top: 12px;
    text-align: center;
    text-shadow: 0 0 5px #000;
}
.tongji1{
    height: 140px;
}
.tongji1 h3{
    line-height: 140px;
    font-size: 22px;
    font-weight: 400;
}
.text-blue{
    color: #0882ff;
}
.info-title{
    font-size: 36px;
    font-weight: 500;
}
.info-content{
    font-size: 18px;
    color: #666;
    margin-top: 8px;
}
</style>